<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>布局——显示和隐藏</title>
    <style type="text/css">
        #div01{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div01:hover{
            display: none;    /*  隐藏    脱离文档流    */
        }
        #div02{
            width: 200px;
            height: 200px;
            background-color:blue;
        }

        #div03{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div03:hover{
            visibility: hidden    /*  隐藏    不脱离文档流    */
        }
        #div04{
            width: 200px;
            height: 200px;
            background-color:blue;
        }



    </style>
</head>
<body>
<!--
<div id="div01">

</div>
<div id="div02">

</div>
<hr/>
-->

<div id="div03">

</div>
<div id="div04">

</div>




</body>
</html>